<template>
	<div id="header">
		<div class="navbox">
			<div class="logo">
				<a href="./index.html"><img src="../assets/img/logo.png" alt=""></a>
			</div>
			<nav class="tnav">
				<ul>
					<li :class="black=='nav-home' ? 'nav-home' : '' ">
						<router-link
							to='/home'
							 tag="a"
							 @click.native='show("nav-home")'
						>
							首页
						</router-link>
					</li>
					<li :class="black=='nav-list' ? 'nav-list' : '' ">
						<router-link
							to='/list'
							 tag="a"
							 @click.native='show("nav-list")'
						>
							菜单
						</router-link>
					</li>
					<li :class="black=='nav-pingl' ? 'nav-pingl' : '' ">
						<router-link
							to='/pingl'
							 tag="a"
							 @click.native='show("nav-pingl")'
						>
							评论区
						</router-link>
					</li>
					<li :class="black=='nav-myd' ? 'nav-myd': '' ">
						<router-link
							to='/myd'
							 tag="a"
							 @click.native='show("nav-myd")'
						>
							个人中心
						</router-link>
					</li>
				</ul>
				<div class="lr">
					<router-link
						to='/login'
						 tag="a"
					>
						登录
					</router-link>
					
					<span>|</span>
					
					<router-link
						to='/reg'
						 tag="a"
					>
						注册
					</router-link>
				</div>
			</nav>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Header',
		props:{},
		data(){
		  return {
			black:''
		  }
		},
		components:{},
		mounted(){
			this.black='nav-'+this.$route.path.substr(1)
		},
		updated(){},
		methods:{
			show(classname){
				this.black=classname
			}
		}
	}
</script>

<style>
	body,html{
	    font-size:18px;
	    background: rgb(13, 13, 13);
	}
	.navbox{
		width:100%;
		background:#333;
		height:70px;
	}
	.logo{
		float: left;
		margin-top:5px;
		margin-left:100px;
	}
	.tnav{
		margin: 0 auto;
		width:1200px;
		height:70px;
	}
	.tnav ul{
		height:100%;
		float: left;
	}
	.tnav ul li{
		height:100%;
		float: left;
		margin-left:50px;
		position: relative;
	}
	.tnav ul li a{
		color:#fff;
		display: block;
		line-height: 70px;
		padding-left:30px;
		padding-right:30px;
	}
	.tnav ul li:hover{
		background:rgb(13, 13, 13);
	}
	.tnav ul li:hover a{
		color:rgb(13, 13, 13);
	}
	.tnav .lr{
		float: right;
		line-height:66px;
		color:#fff;
		margin-right: 40px;
	}
	.tnav .lr a{
	    color: #fff;
	    cursor: pointer;
	}
	.tnav .lr a:hover{
		color:green;
	}
	.tnav ul li:nth-child(1) a:after{
		background-image: url("../assets/img/home.png");
	}
	.tnav ul li:nth-child(2) a:after{
		background-image: url("../assets/img/char.png");
	}
	.tnav ul li:nth-child(3) a:after{
		background-image: url("../assets/img/join.png");
	}
	.tnav ul li:nth-child(4) a:after{
		background-image: url("../assets/img/ente.png");
	}
	.tnav ul li a::after{
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 50px;
		height:50px;
		background-color: rgb(13, 13, 13);;
		display: none;
		background-size: 100% 100%;
	}
	.tnav ul li a:hover::after{
		display: block;
	}
	
	
	
	.tnav ul .nav-home a:after{
		display: block;
	}
	.tnav ul .nav-list a:after{
		display: block;
	}
	.tnav ul .nav-pingl a:after{
		display: block;
	}
	.tnav ul .nav-myd a:after{
		display: block;
	}
	
	.tnav ul .nav-home{
		background: rgb(13, 13, 13);
	}
	.tnav ul .nav-home a{
		color: rgb(13, 13, 13);;
	}
	.tnav ul .nav-list{
		background: rgb(13, 13, 13);
	}
	.tnav ul .nav-list a{
		color: rgb(13, 13, 13);;
	}
	.tnav ul .nav-pingl{
		background: rgb(13, 13, 13);
	}
	.tnav ul .nav-pingl a{
		color: rgb(13, 13, 13);;
	}
	.tnav ul .nav-myd{
		background: rgb(13, 13, 13);
	}
	.tnav ul .nav-myd a{
		color: rgb(13, 13, 13);;
	}
</style>
